<template>
	<view class="content">
		<u-swiper :list="swipers" @change="e => current = e.current" :autoplay="false" :radius="0" :height="218">
			<view slot="indicator" class="indicator">
				<view class="indicator__dot" v-for="(item, index) in swipers" :key="index"
					:class="[index === current && 'indicator__dot--active']">
				</view>
			</view>
		</u-swiper>
		<view class="headersBody">
			<text class="title">{{info.name || ''}}</text>
			<text class="label">日期：{{info.date}}</text>
			<text class="label">上课时间：{{info.start_time}}-{{info.end_time}}</text>
			<!-- <text class="price" :style="{color:$store.state.primaryColor}">￥<text class="money" :style="{color:$store.state.primaryColor}">{{info.salesprice || ''}}</text></text> -->
			<text class="content_text">{{info.description}}</text>
		</view>
		<view class="BoxBody">
			<!-- 	<view class="u_flex">
				<text class="title">包含会员卡</text>
				<view class="flex">
					<text>查看课表</text>
					<u--image :showLoading="true" src="../../static/more.png" width="28rpx" height="28rpx"
						radius="0"></u--image>
				</view>
			</view> -->
			<!-- <text class="text-content">*包含以下会员卡，购买后将自动开通权限</text> -->
			<view class="member-card-container">
				<view class="card-top">
					<view>老师</view>
					<!-- <view>课时总数</view> -->
				</view>
				<view class="card-list">
					<u--image :showLoading="true" :src="info.teacher.avatar" width="38rpx" height="38rpx"
						shape="circle"></u--image>
					<view class="name">{{info.teacher.name}}</view>
					<!-- <view class="line"></view> -->
					<!-- <view class="time">次数卡{{ info.max_num }}次</view> -->
				</view>
			</view>
		</view>
		<view class="ActiveFlex">
			<view class="headers">
				<view v-for="(item,index) in actives" :key="index"
					:style="{'border-bottom':active == index ? `4rpx solid ${$store.state.primaryColor}` : '4rpx solid transparent'}"
					@click="active = index">
					<text
						:style="{'color':active == index ? `${$store.state.primaryColor}` : '#4C4C4C'}">{{item.name}}</text>
				</view>
			</view>
			<view class="New_content_text" v-show="active == 0">
				<text class="content_title">{{info.notice}}</text>
				<text class="content_tips">温馨提示</text>
				<view class="content_flex">
					<view class="content_left">
						<view :style="{border:`4rpx solid ${$store.state.primaryColor}`}"></view>
						<text>活动名额有限，请购买后及时使用</text>
					</view>
					<view class="content_right">
						<view :style="{border:`4rpx solid ${$store.state.primaryColor}`}"></view>
						<text>遇到任何问题请 联系客服</text>
					</view>
				</view>
			</view>
			<ShowBand v-show="active == 1" :info="qrcodeInfo"></ShowBand>
			<view class="lists" v-show="active == 2">
				<view class="tjian">
					<view v-for="(item,index) in lists" :key="index" class="list_Item_FLex"
						@click="linkUrl(`/pages/detail/Tutorial_details?id=${item.id}`)">
						<u--image :showLoading="true" :src="item.image" width="158rpx" height="156rpx"
							radius="0"></u--image>
						<view class="list_Item_right">
							<text
								class="title">{{item.name || ''}}{{item.type == 1 ? '正式课' : '试听课'}}{{`${item.time_num || 0}分钟`}}</text>
							<!-- <view class="list_tips_flex">
								<u--image :showLoading="true" src="../../static/vip.png" width="30rpx" height="22rpx"
									radius="0"></u--image>
								<text>会员卡</text>
							</view> -->
							<view class="bottom_Flex">
								<view class="list_tips_flex">
									<text>日期：{{item.date}}</text>
									<text>上课时间：{{item.start_time}}-{{item.end_time}}</text>
								</view>
								<!-- <text :style="{color:$store.state.primaryColor}">￥{{item.salesprice || ''}}</text> -->
								<button :style="{'background':$store.state.buttonColor}">查看</button>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="payBody">
			<view class="payleft" @click="Qrshow = true">
				<u--image :showLoading="true" src="../../static/Home/kefu.png" width="44.4rpx" height="44.4rpx"
					radius="0"></u--image>
				<text>客服</text>
			</view>
			<button @click="reservation" :style="{'background':$store.state.buttonColor}">立即预约</button>
		</view>
		<!-- <u-popup :show="gbIshow" @close="gbIshow = false" @open="gbIshow = true" mode="center" round="20">
			<view class="NewBackpopupBody">
				<text class="title">老带新送课活动</text>
				<text class="content_text">老带新活动：老客户介绍一位同学来上课之后我们会赠送老客户价值199的3节1对1的课程谢谢您的支持</text>
				<view class="but_flex">
					<button class="rightButton" :style="{ background: $store.state.buttonColor }" @click="gbIshow = false">确定</button>
				</view>
			</view>
		</u-popup> -->
		<view class="box">
			<u-popup :show="Qrshow" @close="Qrshow = false" @open="Qrshow = true" mode="center" round="20">
				<view class="_popupBody">
					<text class="title">联系我们</text>
					<image :src="shopdetail.kefu_qrcode_text" mode="widthFix"></image>
					<text class="tips">扫码添加客服微信</text>
					<view class="flex">
						<u-icon size="19" name="phone-fill" color="#333" style="margin:0px auto;"
							@click="Qrshow = false"></u-icon>
						<text>{{shopdetail.mobile || ''}}</text>
					</view>
					<u-icon size="35" name="close-circle-fill" color="#fff"
						style="margin:0px auto;position:absolute;left:45%;margin-top:30rpx;"
						@click="Qrshow = false"></u-icon>
				</view>
			</u-popup>
		</view>
	</view>
</template>
<script>
	import {
		details,
		course_pay,
		getCourseList,
		getConfig,
		shopDetail,
		courseReservation
	} from '../../api/Home.js';
	import {
		getJsSdk
	} from '../../api/Teacher.js';
	import ShowBand from "../compontent/showBand.vue";
	import jWeixin from '../../js_sdk/jweixin-module';
	export default {
		components: {
			ShowBand
		},
		data() {
			return {
				Qrshow: false,
				swipers: [],
				actives: [{
					name: '内容详情'
				}, {
					name: '品牌介绍'
				}, {
					name: '相关推荐'
				}],
				info: {},
				qrcodeInfo: {},
				active: 0,
				current: 0,
				lists: [],
				shopdetail: {}
			}
		},
		onLoad(options) {
			this.details(options.id);
			this.getList();
			this.getConfig();
			this.shopDetail();
		},
		mounted() {
			// this.share();
		},
		methods: {
			/**
			@method 分享
			**/
			async share() {
				try {
					var th_is = this;
					const res = await getJsSdk({
						url: '/pages/Tabbar/Home/Home'
					});
					jWeixin.config({
						debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
						appId: res.data["appId"], // 必填，公众号的唯一标识
						timestamp: res.data["timestamp"], // 必填，生成签名的时间戳
						nonceStr: res.data["nonceStr"], // 必填，生成签名的随机串
						signature: res.data["signature"], // 必填，签名
						jsApiList: ["updateAppMessageShareData", "updateTimelineShareData"] // 必填，需要使用的JS接口列表
					});
					jWeixin.ready(function() {
						// 分享给朋友
						jWeixin.updateAppMessageShareData({
							title: "约课", // 分享标题
							desc: "邀请您参加预约课程", // 分享描述
							link: `${window.location.href}pages/Tabbar/Home/Home`, // 分享链接
							imgUrl: '', // 分享图标
							type: 'link', // 分享类型,music、video或link，不填默认为link
							success: function() {
								// 分享成功回调
							}
						});
						// 分享到朋友圈
						jWeixin.updateTimelineShareData({
							title: "约课", // 分享标题
							desc: "邀请您参加预约课程", // 分享描述
							link: `${window.location.href}pages/Tabbar/Home/Home`, // 分享链接
							imgUrl: '', // 分享图标
							success: function() {
								// 分享成功回调
							}
						});
					});
				} catch (err) {
					// TODO handle the exception
					console.log(err);
				}
			},
			linkUrl(e) {
				console.log(e, "e")
				uni.navigateTo({
					url: e
				});
			},
			/**
			@method 门店详情
			**/
			async shopDetail() {
				try {
					const res = await shopDetail({
						shop_id: uni.getStorageSync('shop_id') || 1
					});
					this.shopdetail = {
						...res.data
					};
					//this.Qrshow = true;
				} catch (err) {
					//TODO handle the exception
					console.log(err);
				}
			},
			/**
			@method 获取配置
			**/
			async getConfig() {
				try {
					const res = await getConfig();
					this.qrcodeInfo = {
						...res.data
					};
				} catch (err) {
					//TODO handle the exception
					console.log(err);
				}
			},
			/**
			@method 课程列表
			**/
			async getList() {
				try {
					const res = await getCourseList({
						shop_id: uni.getStorageSync('shop_id') || 1
					});
					this.lists = [...res.data.data];
				} catch (err) {
					//TODO handle the exception
					console.log(err);
				}
			},
			/**
			@method 套餐详情
			**/
			async details(Id = null) {
				try {
					const res = await details({
						shop_id: uni.getStorageSync('shop_id') || 1,
						id: Id
					});
					this.info = res.data
					this.swipers = Array.isArray(res.data.image) ? res.data.image : [res.data.image]
				} catch (err) {
					//TODO handle the exception
					console.log(err);
				}
			},
			/**
			@method 购买课程
			**/
			async course_pay(Id = null) {
				try {
					const res = await course_pay({
						course_package_type: 1,
					});
				} catch (err) {
					//TODO handle the exception
					console.log(err);
				}
			},
			/**
			@method 立即预约
			**/
			async reservation() {
				try {
					const {
						shop_id,
						teacher_id,
						date,
						start_time,
						end_time,
						id,
					} = this.info
					const res = await courseReservation({
						shop_id,
						teacher_id,
						date,
						start_time,
						end_time,
						course_id: id,
					});
					if (res.code === 1) {
						uni.showToast({
							icon: 'none',
							title: '预约成功'
						})
					}
				} catch (err) {
					//TODO handle the exception
					console.log(err);
				}
			},
		}
	}
</script>
<style>
	page {
		background-color: #f7f7f7;
	}
</style>
<style scoped lang="scss">
	button::after {
		border: none;
	}

	.content {
		/deep/ .u-safe-bottom {
			display: none;
		}

		._popupBody {
			width: 500rpx;
			height: auto;
			background-color: transparent;
			position: relative;
			padding-bottom: 20rpx;

			/deep/ .u-icon {
				display: flex;
				justify-content: center;
			}

			image {
				width: 300rpx;
				height: 500rpx;
				border-radius: 20rpx;
				margin: 0px auto;
				display: block;
			}

			.title {
				display: block;
				font-size: 37rpx;
				font-weight: 500;
				text-align: center;
				margin-top: 20rpx;
				margin-bottom: 20rpx;
			}

			.tips {
				display: block;
				font-size: 24rpx;
				font-weight: 500;
				text-align: center;
				margin-top: 20rpx;
				margin-bottom: 20rpx;
			}

			.flex {
				width: 40%;
				display: flex;
				align-items: center;
				justify-content: center;
				// border:1px solid red;
				margin: 0px auto;
			}
		}

		.NewBackpopupBody {
			width: 536rpx;
			height: 440rpx;
			padding-top: 50rpx;
			padding-bottom: 0rpx;
			background-image: url('../../static/gb.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;

			.title {
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 36rpx;
				color: #333333;
				display: block;
				text-align: center;
				margin-top: 100rpx;
			}

			.content_text {
				width: 90%;
				margin: 0px auto;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #999999;
				display: block;
				text-align: center;
				padding-top: 30rpx;
				padding-bottom: 30rpx;
			}

			.but_flex {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.rightButton {
					width: 292rpx;
					height: 72rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 32rpx;
					color: #fff;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 50rpx;
					margin-top: 40rpx;
					// background-color:#267fff;
				}
			}
		}

		.New_content_text {
			.content_title {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #101010;
				display: block;
				margin-top: 30rpx;
			}

			.content_tips {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #333333;
				display: block;
				margin-top: 10rpx;
				margin-bottom: 20rpx;
			}

			.content_flex {
				.content_left {
					display: flex;
					align-items: center;
					margin-bottom: 10rpx;

					view {
						width: 10rpx;
						height: 10rpx;
						border: 4rpx solid #029CFE;
						border-radius: 50%;
					}

					text {
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #8E8F8E;
						margin-left: 5rpx;
						letter-spacing: 2rpx;
					}
				}

				.content_right {
					display: flex;
					align-items: center;

					view {
						width: 10rpx;
						height: 10rpx;
						border: 4rpx solid #029CFE;
						border-radius: 50%;
					}

					text {
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #8E8F8E;
						margin-left: 5rpx;
						letter-spacing: 2rpx;
					}
				}
			}
		}

		.payBody {
			width: auto;
			padding: 20rpx 30rpx 20rpx 30rpx;
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.payleft {
				width: 100rpx;

				/deep/ .u-image {
					display: block;
					margin: 0px auto;
				}

				text {
					display: block;
					text-align: center;
				}
			}

			button {
				width: 340rpx;
				border-radius: 50rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #029CFE;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 32rpx;
				color: #FFFFFF;
				margin: 0px;
			}
		}

		.headersBody {
			width: auto;
			background-color: #fff;
			padding: 30rpx;
			display: flex;
			flex-direction: column;

			.title {
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 36rpx;
				color: #202020;
				display: block;
				margin-bottom: 16rpx;
			}

			.label {
				font-size: 22rpx;
				color: #202020;
			}

			.money {
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 48rpx;
				color: #029CFE;
			}

			.content_text {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #888888;
				display: block;
				margin-top: 16rpx;
			}
		}

		.BoxBody {
			width: auto;
			background-color: #fff;
			padding: 30rpx;
			margin-top: 20rpx;

			.u_flex {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.title {
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #202020;
				}

				.flex {
					display: flex;
					align-items: center;

					text {
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #8E8F8E;
						margin-right: 10rpx;
						display: block;
					}
				}
			}

			.text-content {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #8E8F8E;
				display: block;
				margin-top: 10rpx;
			}

			.member-card-container {
				margin-top: 34rpx;
				margin-bottom: 34rpx;
				font-weight: 500;
				color: #101010;
				font-size: 28rpx;

				.card-top {
					background: rgba(254, 126, 37, 0.15);
					border-radius: 16rpx 16rpx 0rpx 0rpx;
					line-height: 64rpx;
					display: flex;
					// justify-content: space-between;
					justify-content: center;
					align-items: center;
					padding: 0 64rpx 0 86rpx;
				}

				.card-list {
					line-height: 106rpx;
					display: flex;
					text-align: center;
					align-items: center;
					// justify-content: space-between;
					justify-content: center;
					border-radius: 0rpx 0rpx 16rpx 16rpx;
					box-shadow: 0rpx 0rpx 16rpx 0px rgba(219, 219, 219, 0.5);
					padding: 0 64rpx 0 86rpx;
					position: relative;
					white-space: nowrap;

					.name {
						width: 280rpx;
					}

					.line {
						position: absolute;
						width: 2rpx;
						height: 76rpx;
						background-color: #D0D0D0;
						right: 260rpx;
					}

					.time {
						width: 140rpx;
					}
				}
			}
		}

		.ActiveFlex {
			width: auto;
			background-color: #fff;
			padding: 30rpx;
			margin-top: 20rpx;

			.headers {
				display: flex;
				justify-content: space-between;
				align-items: center;

				view {
					padding-bottom: 15rpx;
					border-bottom: 4rpx solid transparent;
				}

				text {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #4C4C4C;
				}
			}
		}

		.lists {
			.tjian {
				.list_Item_FLex {
					width: auto;
					padding: 20rpx;
					display: flex;
					// align-items: center;
					margin-top: 20rpx;
					box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
					/* 添加阴影效果 */
					border-radius: 20rpx;

					.list_Item_right {
						width: 80%;
						// border:1px solid red;
						margin-left: 20rpx;

						.title {
							font-family: PingFangSC, PingFang SC;
							font-weight: 600;
							font-size: 28rpx;
							color: #333333;
						}

						.bottom_Flex {
							display: flex;
							align-items: center;
							justify-content: space-between;
							margin-top: 15rpx;

							.list_tips_flex {
								display: flex;
								// align-items: center;
								flex-direction: column;
								margin-top: 5rpx;

								text {
									font-family: PingFangSC, PingFang SC;
									font-weight: 500;
									font-size: 24rpx;
									color: #888888;
									margin-left: 10rpx;
								}
							}

							button {
								width: 160rpx;
								height: 60rpx;
								margin: 0px;
								background-color: #029CFE;
								color: #fff;
								display: flex;
								justify-content: center;
								align-items: center;
								border-radius: 50rpx;
								font-size: 28rpx;
							}
						}
					}
				}
			}
		}
	}
</style>